<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人主页</title>
    <link href="${pageContext.request.contextPath}/static/css/bookdetails-1.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/static/css/author-1.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/static/tool/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bookdetails-1.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/author-1.js"></script>
</head>

<body>
    <jsp:include page="../common/head.jsp"></jsp:include>
    <!--导航结束-->

    <div class="box">
        <div class="box_1 clear">
            <div class="z_left">
                <div class="list_1">
                    <div class="portrait">
                        <p class="por_modify">
                            <img src="${pageContext.request.contextPath}/static/img/avatar.jpg">
                            <a style="display: none" href="javascript:;">修改图像</a>
                        </p>
                        <p>${user.username}</p>
                        <p class="border_b"></p>
<%--                            <a>成为作者</a>--%>
                    </div>
                </div>
                <!--头像部分-->
                <ul class="list_1">
                    <li class="active"><a href="#"><span class="icon"></span>个人资料修改</a></li>
                    <li>
                        <div  style="display: none" class="clear"><a href="#" class="left"><span class="icon"></span>我的消息</a><b>4</b></div>
                    </li>
                    <li><a href="#"><span class="icon"></span>我的书架</a></li>
                    <li style="display: none"><a href="javascript:;"><span class="icon"></span>我的上传记录</a></li>
                    <li><a href="javascript:;" style="display: none;"><span class="icon"></span>创建小说</a></li>
                    <li><a href="javascript:;" style="display: none;"><span class="icon"></span>上传声音书籍</a></li>
                    <li><a href="javascript:;" style="display: none;"><span class="icon"></span>我的小说</a></li>
                </ul>
            </div>
            <!--左边-->

            <div class="center_r">
                <div class="c_1" style="display:block;">
                    <p class="tit">个人资料修改</p>
                    <p class="border_b"></p>
                    <p class="ul">
                        <a href="#" class="active">个人资料</a> |
                        <a href="#" style="display: none">修改头像</a>
                        <a href="#" style="display: none">修改用户名</a>
                        <a href="#" style="display: none">修改电话号码</a> |
                        <a href="#">修改密码</a>
                    </p>
                    <ul class="tab menu_1" style="display:block;">
                        <li class="h_portrait">
                            <p class="por_modify"><img src="${pageContext.request.contextPath}/static/img/avatar.jpg"><a style="display: none" href="javascript:;">修改图像</a></p>
                        </li>
                        <li><span>用户名</span>：${sessionScope.username}
                            <a style="display: none" href="javascript:;" title="修改用户名"><img src="${pageContext.request.contextPath}/static/img/modif.png" class="u_name"></a>
                        </li>
                        <li style="display: none"><span>电话号码</span>：${sessionScope.phone}
                            <a style="display: none" href="javascript:;" title="修改电话号码"><img src="${pageContext.request.contextPath}/static/img/modif.png" class="u_email"></a>
                        </li>
                    </ul>
                    <div class="tab menu_2">
                        <img src="${pageContext.request.contextPath}/static/img/avatar.jpg">
                        <form id="up_pro">
                            <p><input type="file" name="protrait" class="text"><i class="none">您没有上传文件</i></p>
                            <p><input type="button" class="submit" name="up_pro" value="上传"></p>
                        </form>
                    </div>
                    <div class="tab menu_3">
                        <form id="user_name">
                            <p><span>用户名：</span> <input type="text" name="name" value="" class="text_1" placeholder="雪剑无影" autocomplete="off"> <em>*</em><i>请输入用户名</i></p>
                            <p><input type="button" value="提交" class="submit"></p>
                        </form>
                    </div>
                    <div class="tab menu_3" style="display: none">
                        <form id="user_email" action="${pageContext.request.contextPath}/author/updatePhone" method="post">
                            <p><span>电话号码</span> <input type="text" name="phone" value="" class="text_2" autocomplete="off"></p>
                            <p><input type="submit" value="提交" class="submit"></p>
                        </form>
                    </div>
                    <div class="tab menu_3">
                        <form id="user_pass" method="post">
                            <p><span>当前密码：</span> <input id="oldPwd" type="password" name="old_pwd" value="" class="text_3" autocomplete="off"> </p>
                            <p><span>&nbsp;新 密 码：</span> <input type="password" id="newPwd" name="new_pwd" value="" class="text_3" autocomplete="off"> </p>
                            <p><span>确认密码：</span> <input type="password" id="newPwe2" name="new_pwd2" value="" class="text_3" autocomplete="off"></p>
                            <p><input type="button" value="提交" id="up_pass" class="submit" style="margin-left:77px"></p>
                        </form>
                    </div>
                </div>
                <!--个人资料修改-->

                <div class="c_2">
                    <p class="tit" >我的消息 <span><a href="javascript:;" class="del"></a></span></p>
                    <p class="border_b"></p>
                    <ul class="list li">
                        <c:forEach items="${messages}" var="message">
                            <li>
                                <p class="tit">小说更新：<time><fmt:formatDate value="${message.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></time><span><a href="javascript:;"></a></span></p>
                                <p class="con">${message.message}</p>
                            </li>
                        </c:forEach>
                    </ul>
                    <!--一页显示10条-->
<%--                    <ul class="page clear">--%>
<%--                        <li>首页</li>--%>
<%--                        <li>上一页</li>--%>
<%--                        <li><a href="javascript:;" class="thispage">1</a></li>--%>
<%--                        <li><a href="javascript:;">2</a></li>--%>
<%--                        <li><a href="javascript:;">3</a></li>--%>
<%--                        <li><a href="javascript:;">4</a></li>--%>
<%--                        <li><a href="javascript:;">5</a></li>--%>
<%--                        <li><a href="javascript:;">下一页</a></li>--%>
<%--                        <li><a href="javascript:;">尾页</a></li>--%>
<%--                        <li class="tz"><select>--%>
<%--           <option value="1">1</option>--%>
<%--           <option value="1">1</option>--%>
<%--           <option value="1">1</option>--%>
<%--           </select><a href="javascript:;">跳转</a>--%>
<%--                        </li>--%>
<%--                        <li>共 1/3 页</li>--%>
<%--                    </ul>--%>
                    <!--分页-->
                </div>
                <!--我的消息-->

                <div class="c_3">
                    <p class="tit">我的书架<span><a href="javascript:;" class="del"></a></span></p>
                    <p class="border_b"></p>
                    <ul class="list li">
                        <c:forEach items="${myCollect}" var="novel">
                            <li><span class="icon_span pos_book"></span><a title="${novel.desc}" href="javascript:;">${novel.name}</a>
                                <span class="right">
                                    <c:if test="${novel.isTop ==1}"><a href="${pageContext.request.contextPath}/authen/updateTop/${novel.collectId}/0">取消置顶</a></c:if>
                                    <c:if test="${novel.isTop ==0}"><a href="${pageContext.request.contextPath}/authen/updateTop/${novel.collectId}/1">置顶</a></c:if>
                                    <time><fmt:formatDate value="${novel.createTime}" pattern="yyyy-MM-dd" /> </time>
                                    <a href="${pageContext.request.contextPath}/authen/removeCollect/${novel.collectId}">移出书架</a></span>
                            </li>
                        </c:forEach>
                    </ul>
<%--                    <ul class="page clear">--%>
<%--                        <li>首页</li>--%>
<%--                        <li>上一页</li>--%>
<%--                        <li><a href="javascript:;" class="thispage">1</a></li>--%>
<%--                        <li><a href="javascript:;">2</a></li>--%>
<%--                        <li><a href="javascript:;">3</a></li>--%>
<%--                        <li><a href="javascript:;">4</a></li>--%>
<%--                        <li><a href="javascript:;">5</a></li>--%>
<%--                        <li><a href="javascript:;">下一页</a></li>--%>
<%--                        <li><a href="javascript:;">尾页</a></li>--%>
<%--                        <li class="tz"><select>--%>
<%--           <option value="1">1</option>--%>
<%--           <option value="1">1</option>--%>
<%--           <option value="1">1</option>--%>
<%--           </select><a href="javascript:;">跳转</a>--%>
<%--                        </li>--%>
<%--                        <li>共 1/3 页</li>--%>
<%--                    </ul>--%>
                    <!--分页-->
                </div>
                <!--我的书架-->

                <div class="c_3">
                    <p class="tit">我的上传记录<span><a href="javascript:;" class="del">[删除全部记录]</a></span></p>
                    <p class="border_b"></p>
                    <ul class="list li">
                        <li><span class="icon_span pos_book"></span><a href="javascript:;">黑色的办公室出租H5响应式网站模板免费</a>
                            <span class="right"><time>2012-04-04</time><a href="javascript:;">删除记录</a></span></li>
                        <li><span class="icon_span pos_book"></span><a href="javascript:;">黑色的办公室出租H5响应式网站模板免费</a>
                            <span class="right"><time>2012-04-04</time><a href="javascript:;">删除记录</a></span></li>
                        <li><span class="icon_span pos_book"></span><a href="javascript:;">黑色的办公室出租H5响应式网站模板免费</a>
                            <span class="right"><time>2012-04-04</time><a href="javascript:;">删除记录</a></span></li>
                        <li><span class="icon_span pos_book"></span><a href="javascript:;">黑色的办公室出租H5响应式网站模板免费</a>
                            <span class="right"><time>2012-04-04</time><a href="javascript:;">删除记录</a></span></li>
                    </ul>
                    <ul class="page clear">
                        <li>首页</li>
                        <li>上一页</li>
                        <li><a href="javascript:;" class="thispage">1</a></li>
                        <li><a href="javascript:;">2</a></li>
                        <li><a href="javascript:;">3</a></li>
                        <li><a href="javascript:;">4</a></li>
                        <li><a href="javascript:;">5</a></li>
                        <li><a href="javascript:;">下一页</a></li>
                        <li><a href="javascript:;">尾页</a></li>
                        <li class="tz"><select>
           <option value="1">1</option>
           <option value="1">1</option>
           <option value="1">1</option>
           </select><a href="javascript:;">跳转</a>
                        </li>
                        <li>共 1/3 页</li>
                    </ul>
                    <!--分页-->
                </div>
                <!--我的上传-->

                <div class="c_4">
                    <p class="tit">创建小说</p>
                    <p class="border_b"></p>

                    <div class="up_tit">
                        <div class="up_1 clear">
                            <b class="blur">详细数据：</b>
                            <span class="input left"></span>
                            <!--上传文件名称-->
                            <p class="right">
                                <span class="icon up"></span>
                                <span class="left f_s_12">正在上传(0%)</span>
                                <span class="icon del"></span>
                            </p>

                        </div>

                        <!--上传文件信息-->
                        <div class="up_2">
                            <span></span>
                            <span></span>
                            <p class="bg">
                                <b></b>
                            </p>
                        </div>

                        <!--进度条-->
                    </div>

                    <div class="div1">
                        <form role="form" enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/author/writeNovel">
                            <div class="form-group">
                                <label for="name">名称</label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="请输入名称">
                            </div>
                            <div class="form-group">
                                <label for="file">封面上传</label>
                                <input type="file" name="file" id="file">

                            </div>
                            <!-- 分类选择 -->
                            <div class="form-group">
                                <label for="select">类型</label>
                                <select id="select" name="type" class="form-control">
                                    <option value="kh">科幻</option>
                                    <option value="qh">奇幻</option>
                                    <option value="xx">仙侠</option>
                                    <option value="wx">武侠</option>
                                    <option value="xh">玄幻</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="desc">简介</label>
                                <textarea class="form-control" name="desc" id="desc" rows="6" cols="100"></textarea>
                            </div>
                            <button type="submit" class="btn btn-default btn-primary">提交</button>

                        </form>
                    </div>
                    <!--文件上传-->


                    <!--文件信息-->
                </div>
                <!--上传普通文档 -->

                <div class="c_4">
                    <p class="tit">上传有声书籍</p>
                    <p class="border_b"></p>
                    <form name="up_file2" class="up_file">
                        <input type="text" class="up_text">
                        <input type="file" class="up_text2" name="text1">
                    </form>
                    <!--点击上传文件-->
                    <div class="banqu">
                        我们支持MP3, WMA，AIFF，AIF, WAV, FLAC, OGG, MP2, AAC, AMR等文件格式，请尽量上传高音质音频。
                        <p> 多个文件请压缩, 压缩为rar , zip格式, 文件≤200M。</p>
                        <p class="red"> 如上传盗版内容，将会导致下架、封号、索赔，甚至被追究刑事责任。</p>
                    </div>
                    <div class="up_tit">
                        <div class="up_1 clear">
                            <b class="blur">上传文件名称：</b>
                            <span class="input left"></span>
                            <!--上传文件名称-->
                            <p class="right">
                                <span class="icon up"></span>
                                <span class="left f_s_12">正在上传(0%)</span>
                                <span class="icon del"></span>
                            </p>
                        </div>
                        <!--上传文件信息-->
                        <div class="up_2">
                            <span></span>
                            <span></span>
                            <p class="bg">
                                <b>3.4M/5.6M</b>
                            </p>
                        </div>
                        <!--进度条-->
                    </div>
                    <!--文件上传-->
                    <form name="up_file2" class="up_file2" id="soud_file">
                        <input type="hidden" value="" name="up_temp" class="up_temp">
                        <!--上传的文件名称-->
                        <div class="zj">
                            <span class="left">添至书籍：</span>
                            <div class="zj_add clear">
                                <span id="zj_name">选择所属书籍</span>
                                <a href="javascript:;" class="sele">◆</a>
                                <ul class="zj_list">
                                    <li>科幻</li>
                                    <li>玄幻</li>
                                    <li>武侠</li>
                                    <li>仙侠</li>
                                    <li class="zj_li zj_c">
                                        <p><b class="red">+</b>创建新书籍</p>
                                    </li>
                                </ul>
                                <input type="hidden" value="" name="up_add_zj" class="up_add_zj">
                            </div>
                            <a href="javascript:;"><b class="red">+</b><span class="f_s_12 zj_c">创建新书籍</span></a>
                        </div>

                        <p><label>书籍名称：</label><input type="text" value="" name="up_tit" class="up_input_tit">
                            <em>*</em><i>书籍名2----20个字</i>
                        </p>
                        <div class="clear p_t"><label class="left">设置封面：</label>
                            <div class="up_fm">
                                <span class="icon fm_icon"></span>
                                <img src="${pageContext.request.contextPath}/static/img/album_100.jpg" class="fm_img">
                                <span class="icon fm_colse"></span>
                            </div>
                        </div>
                        <!--设置封面-->

                        <div class="up_img">
                            <p class="icon up_img1">上传图片</p>
                            <input type="file" name="up_img" class="up_img2"><i>文件大小<3M,尺寸最好200X200--300X300 </i>
                            <!--当改变时，上传图片，ajax提交返回图片地址-->
                        </div>

                        <p><label style="vertical-align:top">文件描述：</label><textarea name="up_area" class="up_area"></textarea>
                            <br/><i style="margin-left:65px;">文件描述20----100个字</i>
                        </p>
                        <div class="up_tag p_t">
                            <label>标 &nbsp; &nbsp; 签：</label>
                            <input type="text" name="up_tag" class="up_txt"><i class="nored">标签名称禁止重复</i>
                            <div class="list_tag  clear del_tag"></div>
                            <div class="list_tag clear old_tag">
                                <samp>访谈</samp>
                                <samp>娱乐</samp>
                                <samp>情感</samp>
                                <samp>心理</samp>
                                <samp>心灵</samp>
                                <i class="nored none">标签名称禁止重复</i>
                                <input type="hidden" name="up_tag2" class="up_txt2" value="">
                            </div>
                            <p style="margin-left:60px;" class="tag_len"><i>最多5个标签,自定义单个标签最长6个汉字(英文12个),标签之间用,隔开; 建议添加,方便用户搜索</i></p>
                        </div>

                        <p style="margin-left:70px; padding-top:20px"><input type="submit" value="保存" class="submit"></p>
                    </form>
                    <!--文件信息-->
                </div>
                <!--上传有声文档 -->

                <div class="c_3">
                    <p class="tit">我的小说<span><a href="javascript:;" class="del"></a></span>
                        <a href="javascript:;" class="right" id="zj_c"></a>
                    </p>
                    <p class="border_b"></p>
                    <ul class="list li">
                        <c:forEach items="${myNovels}" var="novel">
                            <li><span class="icon_span pos_book"></span><a href="${pageContext.request.contextPath}/guest/book/${novel.id}/1" title="${novel.desc}">${novel.name}</a>
                                <span class="right"><time><fmt:formatDate value="${novel.createTime}" pattern="yyyy-MM-dd"/> </time><a target="_blank" href="${pageContext.request.contextPath}/author/writeNovel/${novel.id}">撰写</a><a href="javascript:;"  onClick="return confirm('您确定删除此书籍')">删除书籍</a></span></li>
                        </c:forEach>
                    </ul>
<%--                    <ul class="page clear">--%>
<%--                        <li>首页</li>--%>
<%--                        <li>上一页</li>--%>
<%--                        <li><a href="javascript:;" class="thispage">1</a></li>--%>
<%--                        <li><a href="javascript:;">2</a></li>--%>
<%--                        <li><a href="javascript:;">3</a></li>--%>
<%--                        <li><a href="javascript:;">4</a></li>--%>
<%--                        <li><a href="javascript:;">5</a></li>--%>
<%--                        <li><a href="javascript:;">下一页</a></li>--%>
<%--                        <li><a href="javascript:;">尾页</a></li>--%>
<%--                        <li class="tz"><select>--%>
<%--           <option value="1">1</option>--%>
<%--           <option value="1">1</option>--%>
<%--           <option value="1">1</option>--%>
<%--           </select><a href="javascript:;">跳转</a>--%>
<%--                        </li>--%>
<%--                        <li>共 1/3 页</li>--%>
<%--                    </ul>--%>
                    <!--分页-->
                </div>
                <!--我的书籍-->

                <div class="up_load">
                    <img src="${pageContext.request.contextPath}/static/img/load.gif">
                </div>
                <!--上传文件或头像的load-->

            </div>
            <!--右边-->
        </div>
    </div>
    <!--内容区结束-->
    <div class="mark">
        <div class="zj_create">
            <h3>创建新书籍<span class="right">×</span></h3>
            <form name="zj" class="up_file2" id="zj_file">
                <div class="clear">
                    <p><label>书籍名称：</label><input type="text" value="" name="zj_name" class="zj_name">
                        <em>*</em><i>书籍名称2---20个字符</i></p>
                    <p style="margin-left:63px;"><i>好的书籍标题至关重要，要用简短文字概括出最有吸引力的卖点哦~<br/>
            &nbsp;例如：青雪讲故事（结合人名）；科技相对论（结合行业）</i></p>
                </div>
                <div class="clear p_t"><label class="left">设置封面：</label>
                    <div class="up_fm">
                        <span class="icon fm_icon"></span>
                        <img src="${pageContext.request.contextPath}/static/img/album_100.jpg" class="fm_img">
                        <span class="icon fm_colse"></span>
                    </div>
                </div>
                <!--设置封面-->
                <div class="up_img">
                    <p class="icon up_img1">上传图片</p>
                    <input type="file" name="up_img" class="up_img2"><i>文件大小<3M,尺寸最好>200X200 </i>
                    <!--当改变时，上传图片，ajax提交返回图片地址-->
                </div>

                <p class="up_type clear"><label>类 &nbsp; &nbsp; 型：</label>
                    <select name="up_type">
             <option value="0">请选择一个类型</option>
             <option value="1">娱乐</option>
             <option value="2">文化</option>
             <option value="3">商业经济</option>
             <option value="4">文学</option>
             <option value="5">历史</option>
              <option value="6">情感生活</option>
             </select> <em>*</em><i class="none">请选择一个类型</i>
                </p>
                <div class="up_px clear p_t"><label class="left">书籍排序： </label>
                    <div class="left">
                        <p><input type="radio" value="px_desc" name="zj_px"> 倒序 <i>最新在前（如：第3集、第2集、第1集）</i></p>
                        <p><input type="radio" value="px_asc" name="zj_px" checked> 正序 <i>最新在后（如：第1集、第2集、第3集）</i><em>*</em> </p>
                    </div>
                </div>

                <p><label style="vertical-align:top">书籍描述：</label><textarea name="up_area" class="area"></textarea>
                    <br/><em style="margin-left:65px;">*</em><i>书籍描述20----200个字</i>
                </p>

                <div class="up_tag p_t">
                    <label>标 &nbsp; &nbsp; 签：</label>
                    <input type="text" name="up_tag" class="up_txt"><i class="nored">标签名称禁止重复</i>
                    <div class="list_tag  clear del_tag"></div>
                    <div class="list_tag clear old_tag">
                        <samp>访谈</samp>
                        <samp>娱乐</samp>
                        <samp>情感</samp>
                        <samp>心理</samp>
                        <samp>心灵</samp>
                        <i class="nored none">标签名称禁止重复</i>
                        <input type="hidden" name="up_tag2" class="up_txt2" value="">
                    </div>
                    <p style="margin-left:60px;" class="tag_len"><i>最多5个标签,自定义单个标签最长6个汉字(英文12个),标签之间用,隔开;  建议添加,方便用户搜索</i></p>
                </div>
                <p style="margin-left:70px; padding-top:20px"><input type="submit" value="保存" class="submit"></p>
            </form>
        </div>
        <!--创建书籍-->

        <div class="zj_load">
            <img src="${pageContext.request.contextPath}/static/img/load.gif">
            <p>书籍正则创建中，请稍后。。。</p>
        </div>

        <div class="mark_bor">
            <div class="clear"><img src="${pageContext.request.contextPath}/static/img/selected.png">
                <p></p>
            </div>
            <!--创建书籍成功和失败-->
        </div>

        <div id="up_3">
            <p>您确定删除此书籍吗</p>
            <p><span class="ease">确定</span><span class="ease">取消</span></p>
        </div>
    </div>
    <!--遮罩层-->


    <footer class="clear">

    </footer>
    <!--底部结束-->
</body>
<script>
    $("#up_pass").click(function () {
        var oldPwd = $("#oldPwd").val();
        var newPwd = $("#newPwd").val();
        var newPwe2 = $("#newPwe2").val();
        if(newPwd != newPwe2){
            layer.msg("两次密码不一致",{icon:2});
        }else {
            $.post("${pageContext.request.contextPath}/user/updatePass?oldPwd="+oldPwd+"&newPwd="+newPwd,function (res) {
                if(res.success){
                    layer.msg(res.message,{icon:2})
                    setTimeout(function () {
                        window.location.href="${pageContext.request.contextPath}/guest/login"
                    },3000)
                }else {
                    layer.msg(res.message,{icon:2});
                }
            });
        }
    });
</script>
<script>
    <c:if test="${add == 'true'}">
    layer.msg("添加成功")
    </c:if>
    <c:if test="${add == 'false'}">
    layer.msg("添加失败")
    </c:if>
    <c:if test="${update == 'true'}">
    layer.msg("更新成功")
    </c:if>
    <c:if test="${update == 'false'}">
    layer.msg("更新失败")
    </c:if>
    <c:if test="${del == 'true'}">
    layer.msg("移除成功")
    </c:if>
    <c:if test="${del == 'false'}">
    layer.msg("移除失败")
    </c:if>
</script>

</html>